<template>
	<view class="" style="width: 100%;">
		<view class="fatherCard" :style=" cardWardData.length == 1?'justify-content: center;':'' ">
			<view class="card" :style=" cardWardData.length == 1?'margin-left:0':'' " v-for="(item,i) in cardWardData" :key="i">
				<view class="card__content" :class=" item.isStartChangeCard? item.level ==1 ?'linghtType2' :'linghtType3'  : 'linghtType1' " :style=" item.isStartChangeCard? 'transform: rotateY(180deg)' :'transform: rotateY(0deg)'">
					<view class="card__front" >
						<image style="width: 100%;height: 100%;"  src="../../static/fildCard/noward.png"></image>
					</view>
					<view class="card__back">
						<view style="width: 100%;height: 100%;overflow: hidden;border-radius: 20upx;" class="">
							<image style="width: 100%;border-radius: 20upx;" :src="item.wardImg" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted,defineExpose } from 'vue'
    const idIndex = ref(0)
    const dataLen = ref(0)
    const cardWardData = reactive([
        {
            isStartChangeCard:false,
            level:1,
            wardImg:'../../static/fildCard/1.webp'
        },
        {
            isStartChangeCard:false,
            level:2,
            wardImg:'../../static/fildCard/2.webp'
        },{
            isStartChangeCard:false,
            level:1,
            wardImg:'../../static/fildCard/3.webp'
        },{
            isStartChangeCard:false,
            level:1,
            wardImg:'../../static/fildCard/4.jpeg'
        },{
            isStartChangeCard:false,
            level:1,
            wardImg:'../../static/fildCard/5.jpeg'
        },{
            isStartChangeCard:false,
            level:1,
            wardImg:'../../static/fildCard/6.jpeg'
        },
    ])
    onMounted(() => {
        dataLen.value = cardWardData.length
    })
    const rotateCards = (()=>{
        if(cardWardData.length == 0){
            return
        }
        cardWardData[idIndex.value].isStartChangeCard = true
        rotateCard()
    })

    const rotateCard = (()=>{
        dataLen.value--
        if(dataLen.value<=0){
            setTimeout( () =>{
                // 延迟400ms 发送翻牌结束状态
                // this.$emit('drawBoxEnd', true);
            }, 800);
            return
        }
        setTimeout( () =>{
            cardWardData[idIndex.value].isStartChangeCard = true
                 // 递归函数
                   rotateCard()
        }, 400);
        idIndex.value++
    })

    defineExpose({
        rotateCards
    })
</script>
<style lang="scss" scoped>
.fatherCard{
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	background: #28272D;
}
.card {
	width: 40%;
	height: 400upx;
	margin: 50upx 0;
	flex-shrink: 0;
	margin-left: calc(20% / 3);
	border-radius: 20upx;
}
.linghtType1{
	box-shadow: 0upx  0upx 26upx 4upx #fff;
}
.linghtType2{
	box-shadow: 0upx  0upx 26upx 4upx #FFC03E;
}
.linghtType3{
	box-shadow: 0upx  0upx 26upx 4upx #EF623D;
}
.card__content {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: all 1s;
	transform-style: preserve-3d;
	border-radius: 20upx;
}
.card__front,
.card__back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: flex;
	justify-content: center;
	color: white;
	border-radius: 20upx;
}
.card__back {
	background-color: #28272D;
	transform: rotateY(180deg);
}
.label{
	display: flex;
	align-items: center;
	margin-top: 6upx;
	.numCla{
		background: rgba(125, 125, 121, 0.3);
		padding: 3upx 15upx;
		position: relative;
		left: -5px;z-index: 1;
		color: rgba(250, 225, 174, 1);
		border-radius: 5upx;
		font-size: 20upx;
	}
}
.detailBox{
	position: absolute;
	z-index: 111;
	top: 73%;
	font-size:30upx;
}
</style>
